import React, {useCallback, useEffect, useState} from 'react';
import {View, StyleSheet, Button, Text, ScrollView, TextInput, Image, ImageBackground,StatusBar} from 'react-native';
import TouchableView from '../components/touchableView';
import {useHeaderHeight} from '@react-navigation/elements'
import screen from '../utils/screen';
import {useNavigation} from '@react-navigation/native'
import Images from '../images/Images';
import store from 'react-native-simple-store'

import {ethShare,witness} from '../../lib/esharesdk'
import {reset} from '../utils/navUtil';


import LGBtn from '../components/touchableView/lgBtn';
import {useAppStore} from '../store/useAppStore';

import {createEthAccount} from "../utils/nativeUtil";

const headerScale = 948 / 1125

const Login = ()=>{


    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()
    const {appState,updateAppState} = useAppStore()


    useEffect(()=>{

        StatusBar.setTranslucent(true)

        store.get('privateKey').then(res=>{
            if(res){
                console.log('local privateKey:',res);

                const ethshare = new ethShare({
                    privateKey:res
                });
                console.log('ethShare:',ethshare.account);
                updateAppState({
                    ethShare:ethshare
                })
            }else{

                createEthAccount().then(data=>{
                    const {publicKey,address,privateKey} = data
                    console.log('eth account:',data);
                    const ethshare = new ethShare({
                        privateKey
                    });

                    store.save('privateKey',privateKey)
                    updateAppState({
                        ethShare:ethshare
                    })
                })

            }
        })

    },[])



    return (
        <ImageBackground
            source={Images.loginBg}
            imageStyle={{width:screen.width,height:screen.height}}
            style={[styles.container]}
        >
            <Image
                source={Images.loginHeader}
                style={{width:screen.width,height:screen.width * headerScale }}
            />

            <View style={styles.middle}>
                <Text style={styles.title}>请登录账户</Text>
                <View style={styles.inputWrap}>
                    <Image
                        source={Images.mine}
                        style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}
                        resizeMode={'contain'}
                    />
                    <TextInput
                        style={styles.input}
                        placeholder={'请输入手机号'}
                        cursorColor={'#111'}
                        placeholderTextColor={'#eee'}/>
                </View>

                <View style={styles.inputWrap}>
                    <Image
                        source={Images.lock}
                        style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}
                        resizeMode={'contain'}
                    />
                    <TextInput style={styles.input}
                               placeholder={'请输入密码'}
                               cursorColor={'#111'}
                               placeholderTextColor={'#eee'}/>
                </View>

                <LGBtn
                    title={'登录'}
                    style={styles.loginBtn}
                    onPress={()=>{
                        reset(navigation,'Home')
                    }}
                />


                <TouchableView
                    style={styles.findBtn}
                    onPress={()=>{
                        // store.delete('account').then(()=>{
                        //     console.log('delete account');
                        // })

                    }}
                >
                    <Text style={{color:'#8C8C8C',fontSize:screen.PIXEL_30}}>找回密码</Text>

                </TouchableView>


            </View>
        </ImageBackground>
    )
}

export default Login

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    middle:{
        flex:1,backgroundColor:'#fff',marginTop: -60,borderTopLeftRadius:20,borderTopRightRadius:20,
        paddingHorizontal:20,paddingTop:40
    },
    title:{
        color:'#111',fontSize:20,fontWeight:500
    },
    inputWrap:{
        flexDirection: 'row',alignItems: "center", height:50,marginTop:10,
        width:'100%',borderBottomWidth:0.3,borderBottomColor:'#eee'
    },
    input:{
        color:'#111',flex:1,fontSize: 16
    },
    loginBtn:{
        alignSelf:'center',marginTop:50
    },
    findBtn:{
        alignSelf:'center',backgroundColor: '#fff',
        width:screen.PIXEL_500,height: screen.PIXEL_90,flexDirection:'row',
        justifyContent:'center',alignItems:'center',borderRadius:60
    },

})
